<template>
  <div style="padding: 30px">
    <div>
      <n-input-group style="width: 345px;">
        <n-input :placeholder='$t("common.search")' style='width: 260px;' v-model:value="searchName"
                 @keyup.enter.native="getQueueNameList">
          <template #prefix>
            <n-icon>
              <ios-search/>
            </n-icon>
          </template>
        </n-input>
        <n-button type='info' style="width: 75px" @click="getQueueNameList">{{ $t("common.search") }}</n-button>
      </n-input-group>
      <n-button type='warning' style="margin-right: 10px" @click="getQueueNameList">
        <template #icon>
          <n-icon style="vertical-align: bottom">
            <md-refresh />
          </n-icon>
        </template>
        {{ $t("common.refresh") }}
      </n-button>
      <n-button type='success' @click="addModal = true" style="margin-right: 10px">
        <template #icon>
          <n-icon style="vertical-align: bottom">
            <ios-add-circle-outline />
          </n-icon>
        </template>{{ $t("queue.add") }}
      </n-button>
    </div>
    <div style="margin-top: 30px">
      <n-data-table :columns="columns" :data="data"/>
    </div>


    <!-- 添加模态框 -->
    <n-modal v-model:show="addModal">
      <n-card style="width: 600px;" :title='t("queue.addQueue")' :bordered="false" size="huge">
        <template #header-extra>
          <n-icon size="28" style="vertical-align: top" @click="addModal = false">
            <ios-close-circle-outline/>
          </n-icon>
        </template>

        <n-input :placeholder='t("queue.addInput")' v-model:value="addInput" @keyup.enter.native="add"></n-input>


        <template #footer>
          <div style="display: flex;justify-content: right;">
            <div style="flex: 1"></div>
            <div>
              <n-button style="margin-right: 10px" @click="addModal = false">{{ $t("common.close") }}</n-button>
              <n-button type='success' @click="add">{{ $t("common.add") }}</n-button>
            </div>
          </div>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, h} from 'vue'
import {findAllQueueRequest, addQueueRequest, deleteQueueRequest} from "../../../service/devil/devil";
import {IosSearch, IosCloseCircleOutline, IosAddCircleOutline, MdRefresh} from '@vicons/ionicons4'
import {useI18n} from "vue-i18n";
import {NButton, useDialog} from "naive-ui";

interface dataInterface {
  key: number,
  name: string
}

export default defineComponent({
  name: "Queue",
  components: {
    IosSearch,
    IosCloseCircleOutline,
    IosAddCircleOutline,
    MdRefresh
  },
  setup: function () {
    const dialog = useDialog()
    const {t} = useI18n()
    // 菜单
    const columns = [
      {
        title: t("queue.name"),
        key: 'name',
        align: 'center'
      }, {
        title: t("common.operating"),
        key: 'edit',
        width: '300',
        align: 'center',
        render(row: dataInterface) {
          return h(
              NButton,
              {
                type: 'error',
                size: 'small',
                onClick: () => deleteQueue(row)
              },
              {default: () => t("common.delete")}
          )
        }
      }
    ]

    let queueList = ref<string[]>()
    let data = ref<dataInterface[]>([])
    let addModal = ref(false)
    // 添加输入框
    let addInput = ref<string>()
    let searchName = ref<string>('')

    // 请求数据
    async function getQueueNameList() {
      queueList.value = await findAllQueueRequest(searchName.value);
      let sum: number = 0;
      data.value = []
      queueList.value?.forEach((value) => {
        data.value.push({
          key: sum,
          name: value
        })
        sum++
      })
    }

    getQueueNameList()

    // 删除
    async function deleteQueue(row: dataInterface) {
      dialog.warning({
        title: t("common.warning"),
        content: t("queue.deleteContent"),
        positiveText: t("common.delete"),
        negativeText: t("common.cancel"),
        onPositiveClick: async () => {
          await deleteQueueRequest(row.name)
          await getQueueNameList()
        },
        onNegativeClick: () => {

        }
      })


    }

    async function add() {
      queueList.value = await addQueueRequest(addInput.value as string)
      data.value = []
      let sum: number = 0;
      queueList.value?.forEach((value) => {
        data.value.push({
          key: sum,
          name: value
        })
        sum++
      })
      addInput.value = ''
      addModal.value = false
    }

    return {
      queueList,
      columns,
      data,
      addModal,
      addInput,
      add,
      searchName,
      getQueueNameList,
      t
    }
  }
})
</script>

<style scoped>

</style>
